<template>
  <div class="personal_purse">
    <!-- <my-header :showBack="true" title="奖金"></my-header> -->
		<div class="ass_top">
      <div class="head_top">
        <div>
          <i class="iconfont icon-caidan1 menu"  @click="showProp"></i>
        </div>
        <div>{{$t("lang.UseBonus")}}</div>
        <div class="rightmenu">
          <i class="iconfont "  @click="pushPath('/BonusList')" >{{$t("lang.Bill")}}</i>
        </div>
      </div>
    <div class="all_ass">
      <h3>{{JifenNum||"0.00"}}</h3>
      <p>{{$t("lang.Currentbonus")}}</p>
    </div>
    </div>
    <!-- input -->
    <div class="banus_input">
        <div class="setbi_box">
          <div class="ul_bibox">
            <div class="useabble">
              <div class="coinbot coinpadd">
                <!-- <p>选择类型</p> -->
                <div class="ce_filed" @click="showSelet">
                  <div class="ce_flex">
                        <label for="">{{$t("lang.Choosethetype")}}</label> 
                  </div>
                  <div class="ce_flex">
                    <p  :data-id="SetID">{{UpTypeName}}</p>
                    <i class="iconfont icon-arrow-right"></i>
                  </div>
                </div>
              </div>
              <div class="coinbot">
                <p>{{$t("lang.CoinNumber")}}</p>
                <input type="number" v-model="outNumber" class="coinnum"  :placeholder="$t('lang.enterSNum')">
              </div>
              <div class="coinbot">
                <p>{{$t("lang.scccPword")}}</p>
                <input type="password" v-model="outpayWord" class="coinnum" :placeholder="$t('lang.enterSpword')">
              </div>
            </div>
          </div>  
        </div>
        <div class="sure_btn">
          <van-button type="primary" size="large"  @click="sellFraction">{{$t("lang.submit")}}</van-button>
        </div>
    </div>
		<!-- 左侧侧滑菜单 -->
    <van-popup v-model="showLeftProp" position="left" :overlay="true" class="leftprop_box">
      <right-menu></right-menu>
    </van-popup>
    <van-actionsheet
        v-model="show"
        :actions="actions"
        :cancel-text="$t('lang.cancel')"
        @select="onSelect"
      />
  </div>
</template>

<script>
import header from "@/components/header";
import { Toast } from 'vant';
import ClipboardJS from 'Clipboard'
import RightMenu from "./RightMenu.vue";

export default {
  components: {
		"my-header": header,
		"right-menu":RightMenu,
  }, 
  data(){
    return{
			userInfo:{},
			
			activeName: '1',
			activeNames: ['0'],
			jyListData:[],
      showLeftProp: false,
      JifenNum:"",
      loading: false,
      show:false,
      finished: true,
      recordList: [],
      outNumber:"",
      outpayWord:"",
      setTypeName:"",
      setTypeId:"",
      // feedBackTypeList:[{type:1,name:"注册分",},{type:2,name:"流通分",}],
      feedbackSelect:'',
      searchData: {
        pageNo: 1, //当前页
        pageSize: 30, //每页30条
        type: 1,//奖金
      },
      SetID:"",
      UpTypeName:"",
      actions: [{name: this.$t('lang.RegisterPoint'),type:1},{name:  this.$t('lang.UsePoint'),type:2}, ]
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy.MM.dd hh:mm");
    }
  },
  created(){
　　//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
    this.UpTypeName = this.actions[0].name;
    this.SetID =  this.actions[0].type;
  },
  mounted(){
    this.$store.commit("updateSelected", 2);
    this.$store.commit("updateNeedShowFooter", true);
    this.selectAccount();
    // this.init();
  },
  methods:{
    getCouponSelected(){
      //获取选中的值
      console.log(this.UpTypeName)
    },
		showProp(){
      this.showLeftProp=true;
    },
    closeProp(){
      this.showLeftProp=false;
    },
    //下拉菜单
    showSelet(){
      this.show=true;
    },
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      Toast(item.name);
      this.UpTypeName=item.name;
      this.SetID=item.type;
    },
    selectAccount(){
      // 个人资产
      this.$ajax(this.$api.selectAccount).then(
        res=>{
          if(res.code==0){
            // 奖金
            this.JifenNum=res.msg.useBonus.toFixed(3);
          }
        }
      )
    },
    init() {
      this.searchData.pageNo = 1;
      this.$ajax(this.$api.selectProfit, this.searchData).then(res => {
        this.loading = false;
        if (res.code === 0) {
          if (res.msg && res.msg.list.length > 0) {
						this.recordList = res.msg.list;
            this.finished = this.searchData.pageNo == res.msg.lastPage;
            this.loading = false;
          }
        } else {
          this.recordList = [];
        }
      });
    },
    loadMore: function() {
      this.searchData.pageNo += 1;
      this.$ajax(this.$api.selectProfit, this.searchData).then(res => {
        this.loading = false;
        if (res.code === 0) {
          if (res.msg && res.msg.list.length > 0) {
            this.recordList = this.recordList.concat(res.msg.list);
            this.finished = this.searchData.pageNo == res.msg.lastPage;
            this.loading = false;
          }
        }
      });
    },
    sellFraction(){
      if(this.SetID==""){
        Toast({ message: this.$t('lang.plaseselecttype'),position: "bottom" });
        return;
      }
      console.log(this.SetID)
      if (!this.$validator.isInt(this.outNumber)) {
        Toast({ message: this.$t('lang.EnterTrueNum'), position: "bottom" });
        return;
      }
      if (this.outpayWord=='') {
        Toast({ message:  this.$t('lang.enterSpword'),  position: "bottom" });
        return;
      }
      if (!this.$validator.isPassword(this.outpayWord)) {
        Toast({ message: this.$t('lang.truepayPass'), position: "bottom" });
        return;
      }
      this.$ajax(this.$api.convertCoin, {payPass:this.outpayWord,amount:this.outNumber,type:this.SetID,}).then(res => {
        if (res.code === 0) {
          Toast({ message: this.$t('lang.CZsuccessful'), position: "bottom" });
          this.outNumber="";
          this.outpayWord="";
          this.selectAccount();
        }else{
          Toast({ message: res.msg, position: "bottom" });
        }
      });
    },
  }
}
</script>

<style lang='less' scoped>
.ass_top{background: url(../../assets/img/assetIndex/grzx_dhzx.png)}
.all_ass{
  text-align: center;padding:4vh 0;
  h3{color: #E1AF56;font-size: 24px;line-height: 30px;}
  p{color: #AA7A24;}
}
// head_top
.head_top{
	width: 100%;
  height: 44px;
	line-height: 44px;
  font-size: 16px;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: transparent;      
}
.head_top .menu{font-size: 20px;}
.head_top i{
  padding:10px;
  font-size: 14px;
}
.head_top div:nth-child(1) {
  width:20%;
  box-sizing: border-box;
}
.head_top div:nth-child(2) {
  width:60%;
  text-align:center;
}
.head_top div:nth-child(3) {
  width:20%;
  text-align:center;
  font-size:12px;
}
// 
.trad_list{
	background: #f6f6f6;
		box-sizing: border-box;padding:0px 12px;background:#ffffff;margin-top:0px;
		h3{color: #333333;line-height: 26px;}
		li{padding: 10px 0;border-bottom: 1px solid #eeeeee;}
		.nflex{display: flex;justify-content:space-between ;
			p{line-height: 20px;color: #999999;}
			span{color: #333333;}
			.npadd{padding: 15px 0;}
			.tiphui{color: #999999;}
			.tipred{color: #FF5458;}
			.tipgren{color: #00BA4F;}
		}
		.buybtn{color: #FF4954;border: 1px solid #FF4954;border-radius: 20px;padding: 0 6px ;}		
}
.jytime{
	h3{color: #333333;font-size: 14px;}
	p{color: #CCCCCC;}
	}
	// leftmenu prop
.leftprop_box{background: #ffffff;width:80vw;height: 100%;}
.leftprop_box h3{padding-left: 14px;font-weight: 600;}
.leftprop_title{height: 65px;line-height: 65px;border-bottom: 1px solid #eeeeee;}
.homeleft_list li{display: flex; justify-content: space-between ;align-items:center; height: 50px;line-height: 50px;padding: 0 12px;color: #333333;}
.homeleft_list li div{display: flex;align-items:center; }
.homeleft_list li img{width: 25px;height: 25px;}
.homeleft_list li p{padding-left: 10px;}
// 输入框样式
.useabble{
  box-sizing: border-box;padding:0 12px;
  input{width: 100%;border:none;height: 30px;}
  .coinnum{font-size: 16px;background: #ffffff;margin-bottom: 10px;}
  .coinbot{
    border-bottom: 1px solid #eeeeee;margin-bottom:10px;
    p{padding-bottom: 5px;color: #333333;font-size: 14px;}
    }
}
.setname{
  height: 30px;
}
.setnameinput{
  select{
    width: 100%;height: 30px;border:none;margin: 10px 0;
  }
}
// 下拉
.ce_filed{display: flex;justify-content:space-between ;box-sizing: border-box;background: #ffffff;height: 30px;}
.ce_filed label{max-width: 110px!important;width: 110px;text-align: left;}
.ce_flex{display: flex;justify-content:space-between;align-items:center;}
.ce_flex p{flex: 2;text-align: right;}
.coinpadd{padding: 10px 0;}
</style>
